<template>
  <div class="app-container">
      <div class="block">
        <el-cascader
          style="width: 300px;margin-left: 6px"
          ref="cascader"
          clearable
          collapse-tags
          placeholder="搜索对应邮箱地址"
          value="sendBatchMail.toList"
          :options="options"
          :props="{ multiple: true }"
          filterable></el-cascader>
        <el-input
          class="Einput"
          type="text"
          placeholder="请输入邮箱主题"
          v-model="sendBatchMail.subject"
          maxlength="20"
          show-word-limit
        >
        </el-input>
        <el-input class="Einput" v-model="input" placeholder="请输入发送邮箱" clearable @blur="blurs"></el-input>
        <Upload @getPath="getPath"></Upload>
      </div>
    <el-input
      type="textarea"
      placeholder="请输入内容"
      style="padding: 6px"
      :autosize="{ minRows: 15, maxRows: 15}"
      v-model="sendBatchMail.context"
      show-word-limit
    >
    </el-input>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          @click="Email"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
        >发送</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="clear"
        >重置</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {Email} from "@/api/gyl/email"
import Upload from "@/components/FileUpload/index.vue"
export default {
  name: "Elements",
  components: {
    Upload
  },
  data() {
    return{
      fileList: [],
      //首次输入邮箱
      input:'',
      sendBatchMail:{
        //邮箱号
        toList:[],
        //邮箱主题
        subject:'',
        //邮箱内容
        context:'',
        //附件在本地的地址
        filePath:''
      },
      //数据上传
      options: [{
        value: '2941538349@qq.com',
        label: '2941538349@qq.com',
      },{
        value :'3202462874@qq.com',
        label :'3202462874@qq.com',},{
        value: '2992637192@qq.com',
        label: '2992637192@qq.com'
      }]
    }
  },
  methods: {
    //清除内容
    clear() {
      this.sendBatchMail.context = ''
      location.reload()
    },
    //验证邮箱格式
    isValidEmail(email) {
      const pattern = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
      return pattern.test(email);
    },
    //鼠标失去焦点后触发函数
    blurs() {
      const data = {
        value: '',
        label: ''
      }
      if (this.isValidEmail(this.input)) {
        data.value = this.input
        data.label = this.input
        this.$data.options.push(data)
      } else {
        this.$modal.msgError("请正确输入邮箱格式");
        this.input = ''
      }
    },
    //获取上传文件的地址
    getPath(path){
      this.sendBatchMail.filePath=`http://47.99.67.117:8088`+path;
      console.log(this.sendBatchMail.filePath)
    },
  //  发送请求
    Email(){
      const page = this.$refs.cascader.getCheckedNodes()
      for (let i in page)
      {
        this.sendBatchMail.toList.push(page[i].label)
      }
      console.log(this.sendBatchMail)
      Email(JSON.stringify(this.sendBatchMail)).then(response =>{
        this.$modal.msgSuccess("发送成功");
        this.clear()
      })
    }
  }

}
</script>
<style lang="css" scoped>
.Einput{
  margin-left:12px ;
  width: 260px;
}
.upload-demo{
  padding: 6px;
  height: 60px;
  line-height: 50px;
}
.el-upload{
  width: 100%;
  height: 50px;
}
.el-upload-dragger{
  width: 100% !important;
  height: 50px !important;
}
.mb8{
  padding: 6px;
}
</style>
